<template>
    <div id="map" style="height: 500px;"></div>
  </template>
  
  <script>
  import L from 'leaflet';
  import 'leaflet-draw/dist/leaflet.draw.css'; // 引入 Leaflet.draw 样式
  import 'leaflet-draw'; // 确保 leaflet-draw 被加载
  
  export default {
    name: 'leafLet',
    mounted() {
      this.initMap();
    },
    methods: {
      initMap() {
        // 初始化地图
        const map = L.map('map').setView([51.505, -0.09], 13);
  
        // 添加 OpenStreetMap 瓦片图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          timeout:1000   //加载超时时间
        }).addTo(map);
  
        // 创建一个 FeatureGroup 用于存储绘制的路径
        const drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);
  
        // 配置绘制控件
        const drawControl = new L.Control.Draw({
          edit: {
            featureGroup: drawnItems,
          },
          draw: {
            polygon: false, // 禁止绘制多边形
            circle: false,  // 禁止绘制圆形
            rectangle: false, // 禁止绘制矩形
            marker: false, // 禁止绘制标记
          },
        });
  
        // 将绘制控件添加到地图
        map.addControl(drawControl);
  
        // 监听用户绘制的事件
        map.on('draw:created', (event) => {
          const layer = event.layer;
          drawnItems.addLayer(layer);
  
          // 输出路径的坐标
          console.log('用户绘制的路径坐标:', layer.getLatLngs());
        });
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  #map {
    height: 100%;
  }
  </style>
  